require(['./config'], () => {
    require(['template', 'header', 'footer'], (template) => {
        class index {
            constructor() {
                this.renderActivities()

                this.carousel()
            }
            renderActivities() {
                //请求json文件，渲染dl
                $.get('/libs/json/Activities.json', resp => {
                    console.log(resp)
                    //根据数据渲染引擎
                    //第一个参数传模板引擎的id名不加#号
                    const str = template('activitiesTemplate', {
                        list: resp
                    })
                    $('.series').html(str)
                    // console.log(str)
                })

            }
            carousel() {
                let index = 0
                let lastIndex = 0
                $('.num span').on('click', function () {
                    lastIndex = index // 往前走一步，现任变前任
                    index = $(this).index() // 找一个新的现任
                    changeImg()
                })

                // 向后
                $('#goNext').on('click', function () {
                    lastIndex = index
                    index++
                    // index的范围是0 ~ length-1
                    if (index === $('.num span').length) {
                        index = 0
                    }
                    changeImg()
                })

                $('#goPrev').on('click', function () {
                    lastIndex = index
                    index--
                    if (index < 0) {
                        index = $('.num span').length - 1
                    }
                    changeImg()
                })

                // 自动轮播：每隔3秒触发一次向右按钮点击
                var timer = null

                function autoPlay() {
                    timer = setInterval(() => {
                        $('#goNext').trigger('click')
                    }, 3000)
                }
                autoPlay()

                $('.main-pic').hover(function () {
                    clearInterval(timer)
                }, function () {
                    autoPlay()
                })

                function changeImg() {
                    $('#uList li').eq(lastIndex).removeClass('ac')
                    $('#uList li').eq(index).addClass('ac')
                    $('.num span').eq(lastIndex).removeClass('ac')
                    $('.num span').eq(index).addClass('ac')
                }
            }
        }
        new index()
    })

})